<template>
	<view class="mainpadding">
		<view class="searchbox flexcenter" @click="jumpurl('/pages/index/sousuo')">
			<u-icon name="search" color="#333" size="20"></u-icon>
			<view class="main_size xiaohei">{{$t("index.spss")}}</view>
		</view>
		<view class="flexleft">
			<!-- 左侧 -->
			<view class="left_box">
				<view :class="item.id==currentid?'xuanzbox':'weixbox'" v-for="item in leftList" :key="item.id" @click="changeleft(item)">{{item.name}}</view>
			</view>
			<!-- 右侧 -->
			<view class="rightbox">
				<image class="topimg" v-if="topmsg.picUrl" :src="topmsg.picUrl"></image>
				<view class="flexcenter xiaohei strongtext margin_top">-{{topmsg.name}}{{$t("class.fl")}}-</view>
				<view class="flexleft flex_wrap">
					<view class="sanshis flexcenter margin_top" v-for="item in rightclass" :key="item.id" @click="jumpsplb(item.id)">
						<view class="flexcolumn">
							<image :src="item.iconUrl" class="itemimg" mode=""></image>
							<view class="strongtext xiaohei margin_top1">{{item.name}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				topmsg:{},
				rightclass:[],
				leftList:[],
				currentid:"",
				currentname:""
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			init(){
				httpRequest.request('/wx/catalog/index', 'GET', {
				}).then(res => {
					this.leftList = res.data.categoryList
					this.currentid = res.data.categoryList[0].id
					this.currentname = res.data.categoryList[0].name
					this.topmsg = res.data.currentCategory
					this.rightclass = res.data.currentSubCategory
				})
			},
			changeleft(item){
				this.currentid = item.id
				this.currentname = item.name
				httpRequest.request('/wx/catalog/current', 'GET', {
					id:item.id
				}).then(res => {
					this.topmsg = res.data.currentCategory
					this.rightclass = res.data.currentSubCategory
				})
			},
			jumpsplb(id){
				uni.navigateTo({
					url:"/pages/index/shangpinlb?name="+this.currentname+"&id="+this.currentid+"&categoryId="+id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.searchbox{
		background-color:#ededed;
		padding: 15rpx 0;
		border-radius: 5rpx;
	}
	.itemimg{
		width: 120rpx;
		height: 120rpx;
	}
	.topimg{
		width: 100%;
		height: 180rpx;
	}
	.ssbox{
		width: 64%;
		padding: 12rpx 23rpx;
		background: #FFFFFF;
		border-radius: 51rpx 51rpx 51rpx 51rpx;
	}
	.sanjx{
		width: 14.86rpx;
		height: 14.86rpx;
	}
	.lpbox{
		padding: 12rpx 28rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
	}
	.shilitu {
		width: 124rpx;
		height: 124rpx;
		border-radius: 14rpx 14rpx 14rpx 14rpx;

		image {
			border-radius: 14rpx 14rpx 14rpx 14rpx;
			width: 100%;
			height: 100%;
		}
	}

	.beijingse1 {
		background-color: #f5f5f5;
		min-height: calc(100vh - 140rpx);
		height: auto;
	}

	.weixbox {
		padding: 30rpx;
		font-size: 24rpx;
		background-color: #F9F9F9;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #999999;
	}

	.xuanzbox {
		padding: 30rpx;
		border-left: 4rpx solid #ab956d;
		font-size: 24rpx;
		background-color: #fff;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #ab956d;
	}

	.rightbox {
		position: fixed;
		left: 175rpx;
		top: 220rpx;
		padding: 5rpx 30rpx 30rpx;
		box-sizing: border-box;
		width: 74%;
		height: calc(100vh - 140rpx);
		overflow-y: auto;
		padding-bottom: 180rpx;
		background-color: #FFFFFF;
	}

	.left_box {
		padding-bottom: 180rpx;
		position: fixed;
		left: 0;
		top: 220rpx;
		width: 23%;
		height: calc(100vh - 140rpx);
		overflow-y: auto;
		background: #F9F9F8;
		box-sizing: border-box;
	}

	.lline {
		width: 1rpx;
		height: 35rpx;
		background-color: #DDDDDD;
	}
</style>
